<!DOCTYPE html>
<html lang="<?= locale_to_bcp_47(get_current_locale()) ?>">
    <head>
        <meta charset="UTF-8" />
        <title><?= is_environment('development') ? '[dev] ' : '' ?><?= $has_errors ? _('Error: ') : '' ?><?= $title ?> · <?= get_app_configuration('brand') ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="canonical" href="<?= $this->safe('canonical') ?>">

        <?php foreach ($alternates as $alternate): ?>
            <link rel="alternate" type="<?= $alternate['type'] ?>" title="<?= protect($alternate['title']) ?>" href="<?= $alternate['url'] ?>" />
        <?php endforeach; ?>

        <?php if ($open_graph): ?>
            <meta property="og:title" content="<?= protect($open_graph['title']) ?>" />
            <meta property="og:type" content="website" />
            <meta property="og:description" content="<?= protect($open_graph['description']) ?>" />
            <meta property="og:locale" content="<?= $open_graph['locale'] ?>" />
            <meta property="og:url" content="<?= $open_graph['url'] ?>" />
            <meta name="twitter:card" content="summary">
            <?php if (isset($open_graph['image'])): ?>
                <meta property="og:image" content="<?= $open_graph['image'] ?>" />
            <?php else: ?>
                <meta property="og:image" content="<?= url_full_static('og-card.png') ?>" />
            <?php endif; ?>
        <?php endif; ?>

        <meta name="application-name" content="<?= get_app_configuration('brand') ?>">
        <meta name="theme-color" content="#00d7ad">
        <link rel="manifest" href="<?= url('webmanifest') ?>">
        <link rel="icon" type="image/png" sizes="32x32" href="<?= url_static('icons/icon-32.png') ?>">
        <link rel="icon" type="image/png" sizes="16x16" href="<?= url_static('icons/icon-16.png') ?>">
        <link rel="mask-icon" href="<?= url_static('icons/safari-pinned-tab.svg') ?>" color="#00d7ad">
        <link rel="apple-touch-icon" sizes="180x180" href="<?= url_static('icons/icon-180.png') ?>">
        <meta name="msapplication-TileImage" content="<?= url_static('icons/icon-144.png') ?>">
        <meta name="msapplication-TileColor" content="#00d7ad">

        <link rel="stylesheet" href="<?= url_asset('stylesheets/application.css') ?>" data-turbo-track="reload">

        <script id="javascript-configuration" type="application/json">
            <?= $this->safe('javascript_configuration') ?>
        </script>
        <script src="<?= url_asset('javascripts/application.js') ?>" data-turbo-track="reload" defer></script>

        <?php if (get_app_configuration('plausible_url')): ?>
            <script defer data-domain="<?= get_current_host() ?>" src="<?= get_app_configuration('plausible_url') ?>/js/script.js"></script>
        <?php endif; ?>

        <meta name="csrf-param" content="csrf" />
        <meta name="csrf-token" content="<?= csrf_token() ?>" />
    </head>

    <body>
        <a
            class="no-mobile accessibility-nav anchor--action"
            href="#main-content"
            tabindex="0"
            data-turbo="false"
        >
            <?= _('Skip to main content') ?>
        </a>

        <div class="layout layout--not-connected" id="layout">
            <noscript>
                <div class="layout__banner layout__banner--alert">
                    <div class="banner__container">
                        <?= _f('You need to activate JavaScript in order to use %s.', get_app_configuration('brand')) ?>
                    </div>
                </div>
            </noscript>

            <?php if (get_app_configuration('demo')): ?>
                <div class="layout__banner">
                    <div class="banner__container">
                        <?= _f('You’re using a demo version of %s, the data are reset every night.', get_app_configuration('brand')) ?>
                    </div>
                </div>
            <?php endif; ?>

            <header class="layout__header header">
                <nav class="header__container">
                    <a class="header__link header__link--home" href="<?= url('home') ?>">
                        <img
                            alt="flus"
                            src="<?= url_static('logo.svg') ?>"
                            width="120"
                            height="40.6"
                        />
                    </a>

                    <div class="header__separator"></div>

                    <?php if (get_app_configuration('registrations_opened') && $current_page !== 'registration'): ?>
                        <a class="header__link no-mobile" href="<?= url('registration') ?>">
                            <?= _('Sign up') ?>
                        </a>
                    <?php elseif ($current_page !== 'login'): ?>
                        <a class="header__link no-mobile" href="<?= url('login') ?>">
                            <?= _('Login') ?>
                        </a>
                    <?php endif; ?>

                    <form
                        class="header__locale-form"
                        method="post"
                        action="<?= url('change locale') ?>"
                        data-controller="autosubmit"
                    >
                        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
                        <input type="hidden" name="redirect_to" value="<?= $canonical ?>" />

                        <div class="form-group">
                            <label for="locale" aria-label="<?= _('Choose your language') ?>">
                                <?= icon('language') ?>
                                <select
                                    id="locale"
                                    name="locale"
                                    data-action="autosubmit#submit"
                                    data-autosubmit-target="actionButton"
                                >
                                    <?php foreach ($available_locales as $locale_value => $locale_name): ?>
                                        <option
                                            value="<?= $locale_value ?>"
                                            <?= $locale_value === get_current_locale() ? 'selected' : '' ?>
                                        >
                                            <?= $locale_name ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                        </div>
                    </form>
                </nav>
            </header>

            <main id="main-content" class="layout__main" tabindex="-1">
                <nav
                    class="layout__back"
                    data-controller="back-button"
                    data-action="popstate@window->back-button#handlePopstate"
                    data-back-button-title-value="<?= $back_options['title'] ?>"
                    data-back-button-reset-value="<?= $back_options['reset'] ? 'true' : 'false' ?>"
                    data-back-button-track-value="<?= $back_options['track'] ? 'true' : 'false' ?>"
                >
                    <a
                        href="#"
                        data-back-button-target="button"
                        data-action="back-button#handleClick"
                    >
                        <?= icon('arrow-left') ?>
                        <?= _('Back') ?>
                    </a>
                </nav>

                <section class="layout__content">
                    <?= $this->safe('content') ?>
                </section>
            </main>

            <?php if ($current_page !== 'about'): ?>
                <footer class="layout__footer">
                    <p>
                        <a href="<?= url('about') ?>">
                            <?= _f('About %s', get_app_configuration('brand')) ?>
                        </a>
                    </p>
                </footer>
            <?php endif; ?>
        </div>

        <?= $this->include('_modal.phtml'); ?>
    </body>
</html>
